<template>
    <div>
        <h1 class="home_h1">网上蛋糕商城</h1>

        <el-carousel type="card" height="500px" style="width: 90%;margin: 0 auto;">
            <el-carousel-item>
                <el-image class="home_image" src="image/宣传图img5.jpg" fit="cover" />
            </el-carousel-item>
            <el-carousel-item>
                <el-image class="home_image" src="image/宣传图img2.jpg" fit="cover" />
            </el-carousel-item>
            <el-carousel-item>
                <el-image class="home_image" src="image/宣传图img3.jpg" fit="cover" />
            </el-carousel-item>
            <el-carousel-item>
                <el-image class="home_image" src="image/宣传图img6.jpg" fit="cover" />
            </el-carousel-item>
        </el-carousel>

        <el-divider />

        <el-card class="home_card">
            <template #header>
                <h3 style="text-align: center;font-size: 32px;">本店特色</h3>
            </template>
            <el-row style="margin: 50px auto;">
                <el-col :span="8">
                    <el-card style="width: 70%;margin: 0 auto;">
                        <h3 style="text-align: center;">蛋糕种类众多</h3>
                        <div style="text-align: center;">
                            约&nbsp;<span style="font: 700 32px 微软雅黑">15</span>&nbsp;种
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card style="width: 70%;margin: 0 auto;">
                        <h3 style="text-align: center;">全国连锁线下店</h3>
                        <div style="text-align: center;">
                            约&nbsp;<span style="font: 700 32px 微软雅黑">***</span>&nbsp;家
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card style="width: 70%;margin: 0 auto;">
                        <h3 style="text-align: center;">优质预约服务</h3>
                        <div style="text-align: center;">
                            可提前&nbsp;<span style="font: 700 32px 微软雅黑">7</span>&nbsp;天
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row style="margin: 50px auto;">
                <el-col :span="8">
                    <el-card style="width: 70%;margin: 0 auto;">
                        <h3 style="text-align: center;">全天在线营业</h3>
                        <div style="text-align: center;">
                            全天&nbsp;<span style="font: 700 32px 微软雅黑">24</span>&nbsp;小时
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card style="width: 70%;margin: 0 auto;">
                        <h3 style="text-align: center;">店铺销售火热中</h3>
                        <div style="text-align: center;">
                            已售&nbsp;<span style="font: 700 32px 微软雅黑">***</span>&nbsp;单
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card style="width: 70%;margin: 0 auto;">
                        <h3 style="text-align: center;">高评分优质店铺</h3>
                        <div style="text-align: center;">
                            评分&nbsp;<span style="font: 700 32px 微软雅黑">5.0</span>&nbsp;/5.0
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>

        <el-button style="margin: 0 auto;border-radius: 50px;width: 500px;height: 80px;display: block;margin-bottom: 100px;"
            type="primary" plain @click="toGoods">去选取商品 >>></el-button>


        <el-divider />
        <el-card style="width: 100%;height: 300px;margin: 0;background-color: rgb(254, 254, 254);" shadow="never">
            <el-row>
                <el-col :span="6">
                    <h1 class="home_h1" style="margin-top: 25%;">网上蛋糕商城</h1>
                </el-col>
                <el-col :span="18" style="margin-top: 20px;">
                    <el-descriptions :column="1" border style="height: 100%;">
                        <el-descriptions-item label="联系电话">12344445555</el-descriptions-item>
                        <el-descriptions-item label="电子邮箱">cakemall@163.com</el-descriptions-item>
                        <el-descriptions-item label="线下地址（总店）">湖南省长沙市望城区**********</el-descriptions-item>
                        <el-descriptions-item label="微信联系">cakemall_12344445555</el-descriptions-item>
                        <el-descriptions-item label="版权方 ©">
                            2023 ***版权所有｜公网安备32289482145895156号｜ICP备2023122783号-2
                            <br>
                            网文〔2023〕4444-555号｜增值电信业务经营许可证：*B2-20231227

                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
        </el-card>

    </div>
</template>

<script>
export default {
    methods: {
        toGoods() {
            this.$store.state.navActive = '/goods';
        }
    }
}
</script>

<style>
.home_h1 {
    text-align: center;
    font: 700 48px 微软雅黑;
    margin-bottom: 80px;
    margin-top: 30px;
}

.home_card {
    width: 80%;
    margin: 100px auto;
}

.home_card:hover {
    transform: scale(1.03);
}

.home_coll {
    width: 100%;
    margin: 0 auto;
    /* box-shadow: var(--el-box-shadow-lighter); */
}

.home_image {
    width: 800px;
    height: 600px;
}
</style>